<template>
  <!-- 内容模块 -->
  <div class="app-container">
    <!-- <el-button size="mini">删除</el-button> -->
    <div class="buttonBox">
      <el-button plain
                 size="mini"
                 type="primary"
                 @click="addDialogShowFn"
                 v-hasPermi="['base:docModule:add']">新增</el-button>
    </div>

    <!-- <el-button size="mini">修改</el-button> -->

    <ComTable v-loading="loading"
              @handleStatusChange="handleStatusChangeFn"
              @EventSelect="EventSelect"
              @handleCurrentChange="changePage"
              @handleSizeChange="pageSizeChange"
              :pagination="{ total: total, pageSize: 10 }"
              :list="comTableList"
              :modes="comModes"
              :config="{ border: true }">
      <el-table-column #default="{ row, $index }">
        <ComMb8Button :config="buttonList"
                      @handle="
            (type) => {
              clickFn(row, $index, type);
            }
          "></ComMb8Button>
      </el-table-column>
    </ComTable>
    <ComDialog @EventClose="closeDialogModuleFn"
               :dialogVisible="dialogVisible"
               width="800px"
               title=" 内容模版修改">
      <el-form ref="form"
               :model="dialogTableList">
        <el-row type="flex"
                justify="center">
          <el-form-item label="类型"
                        prop="addType"
                        :rules="[
              {
                required: true,
                message: '请选择类型',
                trigger: ['change'],
              },
            ]">
            <el-col :span="18">
              <el-select @change="addSelectFn"
                         v-model="dialogTableList.addType"
                         placeholder="请选择类型">
                <el-option v-for="(item, index) in addTypeArr"
                           :key="index"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-row>

        <!-- 表身 -->
        <!-- <el-table algin="center" :data="dialogTableList.data">
          <el-table-column prop="module" label="内容模块" width="280">
            <template #default="{ row, $index }">
              <el-form-item
                :key="$index"
                prop="module"
                :rules="[
                  {
                    required: true,
                    message: $index,
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  v-model="row.module"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="english" label="英文" width="280">
            <template #default="{ row }">
              <el-form-item
                prop="english"
                :rules="[
                  {
                    required: true,
                    message: '请输入邮箱地址',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  v-model="row.english"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column width="200">
            <template #default="{ row, $index }">
              <el-button @click="deleteAddRowFn(row, $index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table> -->

        <!-- ----------------------------------- -->
        <div v-for="(domain, index) in dialogTableList.data"
             :key="index">
          <div class="inputBox"
               style="display: flex">
            <el-form-item class="inputItem"
                          :label="'模块' + index"
                          :prop="'data.' + index + '.module'"
                          :rules="{
                required: true,
                message: '不能为空',
                trigger: 'blur',
              }">
              <el-input v-model="domain.module"></el-input>
            </el-form-item>
            <el-form-item class="inputItem"
                          :label="'英文' + index"
                          :prop="'data.' + index + '.english'"
                          :rules="{
                required: true,
                message: '不能为空',
                trigger: 'blur',
              }">
              <el-input v-model="domain.english"></el-input>
            </el-form-item>
            <el-button style="width: 100px; height: 37px"
                       @click.prevent="deleteAddRowFn(domain, index)">删除</el-button>
          </div>
        </div>
      </el-form>

      <!-- <el-table algin="center"
                :data="dialogTableList">
        <el-table-column prop="type"
                         label="内容类型"
                         width="180">
        </el-table-column>
        <el-table-column prop="module"
                         label="内容模块"
                         width="180">
          <template #default="{ row }">
            <el-input v-model="row.module"
                      placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="english"
                         label="英文"
                         width="180">
          <template #default="{ row }">
            <el-input v-model="row.english"
                      placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column width="180">
          <template #default="{ row, $index }">
            <el-button @click="deleteDialogFn(row, $index)"
                       v-hasPermi="['base:docModule:removeById']">删除</el-button>
          </template>
        </el-table-column>
      </el-table> -->

      <div class="status"
           v-if="dialogTableList[0]">
        <span class="status-text"> 状态 </span>
        <el-radio v-model="dialogTableList[0].status"
                  label="0">启用</el-radio>
        <el-radio v-model="dialogTableList[0].status"
                  label="1">停用</el-radio>
      </div>
      <template #footer>
        <el-button @click="editAddFn">添加多一行</el-button>
        <el-button plain
                   type="pramary"
                   @click="editSaveFn">保存</el-button>
      </template>
    </ComDialog>
    <!-- 内容新增 -->
    <ComDialog @EventClose="closeDialogFn"
               :dialogVisible="addDialogVisible"
               width="800px"
               title="内容新增">
      <el-form ref="form"
               :model="addComtableList">
        <el-row type="flex"
                justify="center">
          <el-form-item label="类型"
                        prop="addType"
                        :rules="[
              {
                required: true,
                message: '请选择类型',
                trigger: ['change'],
              },
            ]">
            <el-col :span="18">
              <el-select @change="addSelectFn"
                         v-model="addComtableList.addType"
                         placeholder="请选择类型">
                <el-option v-for="(item, index) in addTypeArr"
                           :key="index"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-row>

        <!-- 表身 -->
        <!-- <el-table algin="center" :data="addComtableList.data">
          <el-table-column prop="module" label="内容模块" width="280">
            <template #default="{ row, $index }">
              <el-form-item
                :key="$index"
                prop="module"
                :rules="[
                  {
                    required: true,
                    message: $index,
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  v-model="row.module"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="english" label="英文" width="280">
            <template #default="{ row }">
              <el-form-item
                prop="english"
                :rules="[
                  {
                    required: true,
                    message: '请输入邮箱地址',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  v-model="row.english"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column width="200">
            <template #default="{ row, $index }">
              <el-button @click="deleteAddRowFn(row, $index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table> -->

        <!-- ----------------------------------- -->
        <div v-for="(domain, index) in addComtableList.data"
             :key="index">
          <div class="inputBox"
               style="display: flex">
            <el-form-item class="inputItem"
                          :label="'模块' + index"
                          :prop="'data.' + index + '.module'"
                          :rules="{
                required: true,
                message: '不能为空',
                trigger: 'blur',
              }">
              <el-input v-model="domain.module"></el-input>
            </el-form-item>
            <el-form-item class="inputItem"
                          :label="'英文' + index"
                          :prop="'data.' + index + '.english'"
                          :rules="{
                required: true,
                message: '不能为空',
                trigger: 'blur',
              }">
              <el-input v-model="domain.english"></el-input>
            </el-form-item>
            <el-button style="width: 100px; height: 37px"
                       @click.prevent="deleteAddRowFn(domain, index)">删除</el-button>
          </div>
        </div>
      </el-form>
      <!-- ----------------------------------- -->
      <div class="status"
           v-if="addComtableList.data[0]">
        <span class="status-text"> 状态 </span>
        <el-radio v-model="addComtableList.data[0].status"
                  label="0">启用</el-radio>
        <el-radio v-model="addComtableList.data[0].status"
                  label="1">停用</el-radio>
      </div>
      <template #footer>
        <el-button @click="addRowFn">添加一行</el-button>

        <el-button @click="realAddFn">新增</el-button>
      </template>
    </ComDialog>
  </div>
</template>

<script>
import ComDialog from "../../../components/comDialog.vue";
import ComMb8Button from "../../../components/comMb8Button.vue";
import ComTable from "../../../components/comTable.vue";
// 内容管理列表

import { getConfigListTypeAPi } from "@/wss/api/ContentSupervision/TypeSettings.js";

import {
  getContentTempListApi,
  DeleteModuleSingleApi,
  addModuleSingleApi,
  getTypteCatgoryApi,
  deletmoduleApi,
  editModuleApi,
  editStatusApi,
} from "@/wss/api/contentTemplate.js";

export default {
  components: {
    ComTable,
    ComMb8Button,
    ComDialog,
  },
  data () {
    return {
      no: "",
      // 加载状态
      loading: true,
      paging: {
        // 每页的大小
        pageSize: 10,
        // 当前页
        pageNum: 1,
      },
      // 选中的的type

      // 选中的的编号

      // 新增的下拉列表
      addTypeArr: [],

      containerArr: [],
      total: 10,
      // 添加对话框显示
      addDialogVisible: false,
      // 修改对话框显示
      dialogVisible: false,
      // 添加对话框表格
      addComtableList: {
        addType: "",
        data: [
          {
            type: "",
            module: "",
            english: "",
            status: "1",
          },
        ],
      },

      // 修改中的表格数组
      dialogTableList: [],
      comTableList: [],
      comModes: [
        {
          type: "selection",
        },
        {
          label: "内容编号",
          mode: "no",
        },
        {
          label: "类型",
          mode: "type",
        },
        {
          label: "内容模块",
          mode: "module",
        },
        {
          label: "英文",
          mode: "english",
        },
        {
          label: "状态",
          mode: "status",
        },
        {
          label: "创建时间",
          mode: "createTime",
        },
      ],
      buttonList: [
        {
          type: "primary",
          label: "修改",
          vHasPermi: 'base:docModule:edit'
        },
        {
          type: "danger",
          label: "删除",
          vHasPermi: 'base:docModule:remove'
        },
      ],
      isPass: false,
    };
  },
  // computed: {
  //   toUpperCase: {
  //     set(value) {},
  //   },
  // },
  // 开始就渲染
  mounted () {
    this.getContentTempListFn(this.paging);
  },

  methods: {
    verificationFn (value) {
      if (value) {
        this.isPass = false;
      } else {
        this.isPass = true;
      }
      // console.log("触发了");
    },
    // 修改与新增转换成大写
    toUpperCaseFn (data, fn) {
      data.forEach((item) => {
        item.english = item.english.toUpperCase();
      });
      return fn(data);
    },
    //新增模块的选择函数
    addSelectFn (value) {
      this.no = value;
      console.log(this.no);
      this.addTypeArr.find((item) => {
        item.value === value ? (this.addComtableList.addType = item.label) : "";
      });
    },

    // 让新增对话框出现
    async addDialogShowFn () {
      this.addComtableList = {
        addType: "",
        data: [
          {
            type: "",
            module: "",
            english: "",
            status: "1",
          },
        ],
      };
      this.addDialogVisible = true;
      let resultType = await getConfigListTypeAPi();
      console.log(resultType, "模板数据");
      this.addTypeArr = [];
      // 生成选择列表
      resultType.rows.forEach((item) => {
        this.addTypeArr.push({
          value: item.value,
          label: item.name,
        });
      });
      console.log(resultType.rows, "shujv");
    },
    // 添加一个模块
    async realAddFn () {
      this.addComtableList.data.forEach((item) => {
        item.status = this.addComtableList.data[0].status;
        item.type = this.addComtableList.addType;
        item.no = this.no;
      });
      try {
        await this.$refs.form.validate();
        // 不传递数据就不给添加
        if (!this.addComtableList.data[0]) {
          throw new Error("至少一个字段");
        }
        console.log(this.addComtableList.data, "给后端");
        let { msg } = await this.toUpperCaseFn(
          this.addComtableList.data,
          addModuleSingleApi
        );

        this.$message({
          type: "success",
          message: msg,
        });
        this.addDialogVisible = false;
        this.$refs.form.resetFields();
        this.getContentTempListFn();
      } catch (error) {
        this.$message({
          type: "error",
          message: error.message ? error.message : "请填写完内容",
        });
      }
    },
    // 添加一行
    addRowFn () {
      this.addComtableList.data.push({
        type: "",
        module: "",
        english: "",
        no: "",
        status: "1",
      });
    },
    deleteAddRowFn (row, $index) {
      console.log($index);
      this.addComtableList.data.splice($index, 1);
      console.log("新增行添加的删除");
    },
    // -----------------------  以上新增对话框的function----------------------------------
    // 状态发生改变时候
    async handleStatusChangeFn (row) {
      await editStatusApi([{ id: row.idStr, status: row.status }]);

      this.getContentTempListFn(this.paging);
    },
    // 选择发生改变时就会触发
    EventSelect (selection) {
      console.log(selection);
    },
    async editAddFn () {
      let obj = {
        type: this.dialogTableList[0].type,
        module: "",
        status: "",
        no: this.dialogTableList[0].no,
        english: "",
      };
      this.dialogTableList.push(obj);
    },
    // 修改中的保存
    async editSaveFn () {
      console.log(this.dialogTableList)

      this.dialogTableList.map((item, index) => {
        item.status = this.dialogTableList[0].status;
        // 后端要的id（后期可能要转换成数字）
        item.id = item.idStr;
      });
      let { msg, code } = await this.toUpperCaseFn(
        this.dialogTableList,
        editModuleApi
      );
      // let data = await editModuleApi(this.dialogTableList);
      this.$message({
        message: msg,
        type: code === 200 ? "success" : "error",
      });
      this.getContentTempListFn();
      this.dialogVisible = false;
    },
    // 查找分类
    async getTypteCatgoryFn (row) {
      return getTypteCatgoryApi({
        type: row.type,
        no: row.no,
      });
    },
    // 删除还是修改
    async clickFn (row, $index, type) {
      if (type === "primary") {
        this.dialogTableList = [];
        this.containerArr = [];
        // 回显数据
        let { data } = await this.getTypteCatgoryFn(row);
        this.dialogTableList = data;
        this.dialogVisible = true;
      }
      // 删除
      if (type === "danger") {
        this.$confirm("你确定要删除？, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            let arr = [];
            arr.push({
              type: row.type,
              no: row.no,
            });
            let { msg } = await deletmoduleApi(arr);
            // 更新数据
            this.getContentTempListFn(this.paging);
            this.$message({
              type: "success",
              message: msg,
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },

    // 关闭对话框
    closeDialogFn () {
      this.$refs.form.resetFields();
      this.addDialogVisible = false;
      this.dialogVisible = false;
    },
    // 修改内容模版
    closeDialogModuleFn (bl) {
      this.dialogVisible = bl
    },
    // 修改对话框中的删除
    async deleteDialogFn (row, $index) {
      // 删除
      await DeleteModuleSingleApi(row.idStr);
      //  更新数据
      let { data } = await this.getTypteCatgoryFn(row);
      this.dialogTableList = data;
    },
    // 切换当前页数
    async changePage (pageNum) {
      this.paging.pageNum = pageNum;
      this.getContentTempListFn(this.paging);
    },
    // 切换页容量
    async pageSizeChange (pageSize) {
      this.paging.pageSize = pageSize;
      this.paging.pageNum = 1;
      this.getContentTempListFn(this.paging);
    },
    // 获取数据
    async getContentTempListFn (params) {
      this.loading = true;
      let data = await getContentTempListApi(params);
      console.log(data, "data");
      if (data.code === 200) {
        // this.comModes =
        this.comTableList = data.rows;

        this.total = data.total;

        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.buttonBox {
  margin-bottom: 10px;
}
.verificationClass {
  border: 1px red solid;
}
.verificationClass::after {
  content: attr(name);
  display: block;
}
::v-deep .el-radio {
  margin-left: 60px;
}
.status {
  margin-top: 20px;
  .status-text {
    margin-left: 15px;
  }
}
.inputItem,
.inputBox {
  display: flex;
}
::v-deep .is-justify-center {
  justify-content: unset;
}
</style>